<template>
	<view class="content" v-if="isShow" @click.stop="isShow = false">
        <canvas @longtap="longtapSaveImage" disable-scroll="true" :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="my-canvas">
            <!-- #ifdef H5 -->
            <image :src="posterImage" mode="widthFix" style="width: 100%;"></image>
            <!-- #endif  -->
        </canvas>
        <!-- #ifdef APP-PLUS || MP -->
        <view v-if="posterShow" class="save-btn" @click.stop="saveImage">保存图片</view>
        <!-- #endif  -->
        <!-- #ifdef H5 -->
        <view v-if="posterShow" class="save-btn">长按图片保存</view>
        <!-- #endif  -->
	</view>
</template>

<script>
    import Qr from '@/common/wxqrcode.js'
    import { Foundation } from '@/ui-utils/index.js'
    import { domain, api } from '@/config/config'
    import downloader from '@/common/img-downloader.js'
    import Cache,{Keys} from '@/utils/cache.js'
	export default {
		props:{
			goodsImg:{
				type: String,
				default: ''
			},
			goodsName:{
				type: String,
				default: ''
			},
            goodsId: {
                type: String,
                default: ''
            },
			price:{
				type: Number,
				default: 0.00
			},
            promotion: {
                type: Object,
                default() {
                    return {}
                }
            },
            qrcode: {
                type: String,
                default: ''
            },
            disParams: {
                type: String,
                default: ''
            }
		},
		data(){
			return {
				canvasW: 0,
				canvasH: 0,
				ctx: null,
				isShow: false,
                posterShow: false,
                rpx: uni.getSystemInfoSync().windowWidth / 375,
				posterImage: ''
			}
		},
		methods: {
			//显示
			showCanvas(){
				this.isShow = true
				this.__init()
                console.log(this.goodsImg)
			},
			//初始化画布
			async __init() {
				uni.showLoading({
				    title: '图片生成中',
					mask: true
				})
				this.ctx = uni.createCanvasContext('my-canvas',this)
				this.canvasW = uni.upx2px(520);
				this.canvasH = uni.upx2px(850);
				//设置画布背景透明
				this.ctx.setFillStyle('rgba(255, 255, 255, 0)')
				//设置画布大小
				this.ctx.fillRect(0,0,this.canvasW,this.canvasH)
				//绘制圆角背景
				this.drawRoundRect(this.ctx, 0, 0, this.canvasW, this.canvasH,uni.upx2px(20),'#FFFFFF')
				let hW = uni.upx2px(480);
				let hH = uni.upx2px(480);
				//绘制商品图
                //#ifdef H5
				this.drawRoundImg(this.ctx,this.goodsImg,((this.canvasW-hW) / 2),((this.canvasW-hW) / 2),hW,hH,8)
                //#endif
                //#ifndef H5
                let goodsImg = await this.getImageInfo(this.goodsImg)
				this.drawRoundImg(this.ctx,goodsImg.tempFilePath,((this.canvasW-hW) / 2),((this.canvasW-hW) / 2),hW,hH,8)
                //#endif
                let pointWidth = ''
                //活动价
                if (this.promotion && this.promotion.promotion_type) {
                    this.ctx.setFontSize(16);
                    this.ctx.setFillStyle('#ff5000');
                    this.ctx.fillText('￥',((this.canvasW-hW) / 2),(((this.canvasW-hW) / 2) + hH + 30))
                    this.ctx.setFontSize(18);
                    if (this.promotion.promotion_type === 'EXCHANGE') {
                        pointWidth = this.ctx.measureText(this.promotion.exchange.exchange_money + '').width + this.ctx.measureText(this.promotion.exchange.exchange_point + '').width + 150
                        this.ctx.fillText(Foundation.formatPrice(this.promotion.exchange.exchange_money) + ' + ' + this.promotion.exchange.exchange_point + '积分',(((this.canvasW-hW) / 2) + 14),(((this.canvasW-hW) / 2) + hH + 30))
                    } else if (this.promotion.promotion_type === 'SECKILL') {
                        pointWidth = this.ctx.measureText(this.promotion.seckill_goods_vo.seckill_price + '').width + 65
                        this.ctx.fillText(Foundation.formatPrice(this.promotion.seckill_goods_vo.seckill_price),(((this.canvasW-hW) / 2) + 14),(((this.canvasW-hW) / 2) + hH + 30))
                    } else if (this.promotion.promotion_type === 'GROUPBUY') {
                        pointWidth = this.ctx.measureText(this.promotion.groupbuy_goods_vo.price + '').width + 65
                        this.ctx.fillText(Foundation.formatPrice(this.promotion.groupbuy_goods_vo.price),(((this.canvasW-hW) / 2) + 14),(((this.canvasW-hW) / 2) + hH + 30))
                    }
                } else {
                    this.ctx.setFontSize(16);
                    this.ctx.setFillStyle('#ff5000');
                    this.ctx.fillText('￥',((this.canvasW-hW) / 2),(((this.canvasW-hW) / 2) + hH + 30))
                    this.ctx.setFontSize(20);
                    this.ctx.fillText(Foundation.formatPrice(this.price),(((this.canvasW-hW) / 2) + 14),(((this.canvasW-hW) / 2) + hH + 30))
                }
                //活动
                if (this.promotion && this.promotion.promotion_type) {
                    this.ctx.setFontSize(12);
                    this.ctx.setFillStyle('#ff5000');
                    this.ctx.setStrokeStyle("#ff5000")//设置线条的颜色
                    this.ctx.setLineWidth(1)//设置线条宽度
                    if (this.promotion.promotion_type === 'EXCHANGE') {
                        this.ctx.fillText('积分活动' ,((this.canvasW-hW) / 2 + pointWidth + 6),(((this.canvasW-hW) / 2) + hH + 28))
                        this.ctx.strokeRect(((this.canvasW-hW) / 2 + pointWidth), (((this.canvasW-hW) / 2) + hH + 15), 60, 18);
                    } else if (this.promotion.promotion_type === 'SECKILL') {
                        this.ctx.fillText('限时抢购',((this.canvasW-hW) / 2 + pointWidth + 6),(((this.canvasW-hW) / 2) + hH + 28))
                        this.ctx.strokeRect(((this.canvasW-hW) / 2 + pointWidth), (((this.canvasW-hW) / 2) + hH + 15), 60, 18);
                    } else if (this.promotion.promotion_type === 'GROUPBUY') {
                        this.ctx.fillText('团购活动',((this.canvasW-hW) / 2 + pointWidth + 6),(((this.canvasW-hW) / 2) + hH + 28))
                        this.ctx.strokeRect(((this.canvasW-hW) / 2 + pointWidth), (((this.canvasW-hW) / 2) + hH + 15), 60, 18);
                    }
                }
                //原价
                if (this.promotion && this.promotion.promotion_type) {
                    this.ctx.setFontSize(12);
                    this.ctx.setFillStyle('#999999');
                    if (this.promotion.promotion_type === 'EXCHANGE') {
                        this.ctx.fillText('原价：￥' + Foundation.formatPrice(this.promotion.exchange.goods_price),((this.canvasW-hW) / 2),(((this.canvasW-hW) / 2) + hH + 60))
                    } else if (this.promotion.promotion_type === 'SECKILL') {
                        this.ctx.fillText('原价：￥' + Foundation.formatPrice(this.promotion.seckill_goods_vo.original_price),((this.canvasW-hW) / 2),(((this.canvasW-hW) / 2) + hH + 60))
                    } else if (this.promotion.promotion_type === 'GROUPBUY') {
                        this.ctx.fillText('原价：￥' + Foundation.formatPrice(this.promotion.groupbuy_goods_vo.original_price),((this.canvasW-hW) / 2),(((this.canvasW-hW) / 2) + hH + 60))
                    }
                }
                //绘制标题
                let row = this.newLine(this.goodsName, this.ctx)
                let a = 20//定义行高20
                for (let i = 0; i < row.length; i++) {
                    this.ctx.setFontSize(14)
                    this.ctx.setFillStyle("#000000")
                    this.ctx.fillText(row[i], ((this.canvasW-hW) / 2),(((this.canvasW-hW) / 2 + a * i) + hH + 100))
                }
				//小程序码 二维码
                // #ifdef APP-PLUS || H5
                let qrcodeImg = Qr.createQrCodeImg( `${domain.wap}/goods-module/goods${this.disParams}`)
                this.ctx.drawImage(qrcodeImg, 165 * this.rpx,(((this.canvasW-hW) / 2) + hH + 80), 75 * this.rpx, 75 * this.rpx)
                // #endif
                // #ifdef MP
                let qrcodeImg = await this.getImageInfo(this.qrcode)
                this.ctx.drawImage(qrcodeImg.tempFilePath, 170 * this.rpx,(((this.canvasW-hW) / 2) + hH + 80), 75 * this.rpx, 75 * this.rpx)
                // #endif
				//延迟渲染
				setTimeout(()=>{
					this.ctx.draw(true,()=>{
						uni.hideLoading()
                        this.posterShow = true
					})
				}, 200)
			},
			//带圆角图片
			drawRoundImg(ctx, img, x, y, width, height, radius){
				ctx.beginPath()
				ctx.save()
				// 左上角
				ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5)
				// 右上角
				ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2)
				// 右下角
				ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5)
				// 左下角
				ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI)
				ctx.stroke()
				ctx.clip()
				ctx.drawImage(img, x, y, width, height);
				ctx.restore()
				ctx.closePath()
			},
			//圆角矩形
			drawRoundRect(ctx, x, y, width, height, radius, color){
				ctx.save();
				ctx.beginPath();
				ctx.setFillStyle(color);
				ctx.setStrokeStyle(color)
				ctx.setLineJoin('round');  //交点设置成圆角
				ctx.setLineWidth(radius);
				ctx.strokeRect(x + radius/2, y + radius/2, width - radius , height - radius );
				ctx.fillRect(x + radius, y + radius, width - radius * 2, height - radius * 2);
				ctx.stroke();
				ctx.closePath();
			},
            // canvas多文字换行
            newLine(txt, context) {
                let txtArr = txt.split('')
                let temp = ''
                let row = []
                for (let i = 0; i < txtArr.length; i++) {
                    // #ifdef H5 || MP
                    if (context.measureText(temp + '').width < 130 * this.rpx) {
                        temp += txtArr[i]
                    }
                    // #endif
                    // #ifdef APP-PLUS
                    if (temp.length < 12) {
                        temp += txtArr[i]
                    }
                    // #endif
                    else {
                        i--
                        row.push(temp)
                        temp = ''
                    }
                }
                row.push(temp)
                //如果数组长度大于3 则截取前三个
                if (row.length > 3) {
                    let rowCut = row.slice(0, 3);
                    let rowPart = rowCut[2];
                    let test = "";
                    let empty = [];
                    for (let a = 0; a < rowPart.length; a++) {
                      if (context.measureText(test + '').width < 130 * this.rpx) {
                        test += rowPart[a];
                      } else {
                        break;
                      }
                    }
                    empty.push(test);
                    let group = empty[0] + "..." //这里只显示三行，超出的用...表示
                    rowCut.splice(2, 1, group);
                    row = rowCut;
                }
                return row
            },
			//获取图片
			getImageInfo(imgSrc){
				return new Promise((resolve, reject) => {
                    uni.downloadFile({
                        url: imgSrc,
                        success: resolve,
                        fail: reject
                    })
				});
			},
			//保存图片到相册
			saveImage(e){
                // #ifdef MP
				//判断用户授权
				uni.getSetting({
				   success(res) {
					  if(Object.keys(res.authSetting).length>0){
						  //判断是否有相册权限
						  if(res.authSetting['scope.writePhotosAlbum']==undefined){
							  //打开设置权限
							  uni.openSetting({
							    success(res) {
							      console.log('设置权限',res.authSetting)
							    }
							  })
						  }else{
							  if(!res.authSetting['scope.writePhotosAlbum']){
								  //打开设置权限
								  uni.openSetting({
								    success(res) {
								      console.log('设置权限',res.authSetting)
								    }
								  })
							  }
						  }
					  }else{
						  return
					  }
				   }
				})
                // #endif
				let that = this
				uni.canvasToTempFilePath({
					canvasId: 'my-canvas',
					quality: 1,
					complete: (res) => {
						that.isShow = false
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						})
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								that.isShow = false
								uni.showToast({
									title: '已保存到相册',
									icon: 'success',
									duration: 2000
								})
							}
						})
					}
				},that);
			},
            // 长按保存
            longtapSaveImage() {
                let that = this
                uni.canvasToTempFilePath({
                	canvasId: 'my-canvas',
                	quality: 1,
                	complete: (res) => {
                		// 生成完海报，调用上传功能
                		uni.uploadFile({
                			url: `${api.buyer}/uploaders`,
                			header: { Authorization: Cache.getItem(Keys.accessToken) },
                			filePath: res.tempFilePath,
                			name: 'file',
                			success: (uploadFileRes) => {
                                let data = JSON.parse(uploadFileRes.data).url
                                this.posterImage = data.replace(/http\:\/\//, 'https://')
                                //浏览器上图片长按下载
                                if (uni.getSystemInfoSync().platform == 'ios') {
                                    let promise = downloader.load(this.posterImage, 'poster');
                                    promise.then(([error, res])=>{
                                        console.log(error, res);
                                    });
                                }
                			}
                		})
                	}
                },that);
            }
        }
    }
</script>

<style scoped lang="scss">
.content{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    z-index: 999;
	background: rgba(0,0,0,.4);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.save-btn{
		margin-top: 35rpx;
		color: #FFFFFF;
		background: linear-gradient(to right, #FD5632 0%, #EF0D25 100%);
		padding: 20rpx 180rpx;
		border-radius: 50rpx;
	}
}
/leep/.uni-image  {
	width: 320px;
	height: 240px;
	display: inline-block;
	overflow: hidden;
	position: relative;
}
</style>
